/*global*/
html{
    width:100%;
    height:100%;
    /*
      考虑兼容性问题
       文字旋转时不会改变大小
    */
    -webkit-text-size-adjust:none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
}

body{
    margin:0;
    padding:0;
    height:100%;
    width:100%;
    background:#47c9af;
    color:#74777b;
    font-weight:300;
    font-size:1.5em;
    font-family:"Raleway" ,"Arial";
}
ul{
    list-style:none;
    padding:0;
    margin:0;
}

a:link,a:visited,a:focus{
    text-decoration: none;
    outline:none;
}
/* :after 在被选元素后插入，：before被选元素前插入 */
*,*:after,*:before{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing:border-box;
}

*:after,*:before{
    display: block;
    content:"";
}

/*清除浮动*/
*:after{
    clear:both;
}

/* Navgaitor */
.nav{
    width:800px;
    height:300px;
    margin:200px auto;
}

.nav li{
    display: inline-block;
    margin:0 1em;
}

.tooltip{
    display: inline-block;
    font-weight:700;
    color:rgba(0,0,0,0.3);
    padding:0.15em 0.25em 0;
    position:relative;
    z-index:9999; /* 页面层面位置 递增 */
   -webkit-transition: color 0.3s;
   transition: color 0.3s;
}
.tooltip:hover{
    color:#fff;
    font-weight: bold;
}

/* 气泡圆形构造 */
.tooltips-content{
    width:80px;
    height:80px;
    color:#47c9af;
    background: #ffffff;
    position:absolute;
    left:50%;
    z-index:999;
    margin-left:-40px;
    bottom: 100%;
    margin-bottom: 20px;
    text-align:center;
    padding-top: 25px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    opacity: 0;
    /*设置过渡*/
    -webkit-transition: opacity 0.3s,-webkit-transform 0.3s;
    transition:opacity 0.3s,transform 0.3s;
}
.tooltip .tooltips-content i{
    opacity: 0;
    -moz-transition: opacity 0.3s,transform 0.3s;
    -webkit-transition: opacity 0.3s,transform 0.3s;
    transition:opacity 0.3s,transform 0.3s;
}


/* 引入svg 图片 冒泡的底部 */
.tooltips-content:after{
    display: block;
    content:"";
    width:30px;
    height:20px;
    background:url("../images/tooltip1.svg")no-repeat center center;
    position:absolute;
    top:100%;
    left: 50%;
    margin:-7px 0 0 -15px;
}
/* 动画效果 */
/* 气泡1 */
.tooltip-effect-1 .tooltips-content{
    -webkit-transform: translate3d(0,10px,0) rotate3d(1,1,1,45deg);
    -moz-transform: translate3d(0,10px,0) rotate3d(1,1,1,45deg);
    -ms-transform: translate3d(0,10px,0) rotate3d(1,1,1,45deg);
    -o-transform: translate3d(0,10px,0) rotate3d(1,1,1,45deg);
    transform: translate3d(0,10px,0) rotate3d(1,1,1,45deg);
    transform-origin: center bottom; /*定 中心*/
    -webkit-transition:opacity 0.3s;
    transition:opacity 0.3s;
}

.tooltip-effect-1 .tooltips-content i{
    -webkit-transform:scale3d(0,0,1);
    transform:scale3d(0,0,1);
}

/* 气泡1 end */
/* 气泡2 */
.tooltip-effect-2 .tooltips-content{
    -webkit-transform: translate3d(0,20px,0);
    -moz-transform: translate3d(0,20px,0);
    -ms-transform: translate3d(0,20px,0) ;
    -o-transform: translate3d(0,20px,0) ;
    transform: translate3d(0,20px,0);

}

.tooltip-effect-2 .tooltips-content i{
   -webkit-transform: translate3d(0,15px,0);
   transform: translate3d(0,15px,0);
}

/* 气泡2 end*/
/* 气泡3*/
.tooltip-effect-3 .tooltips-content{
    -webkit-transform:translate3d(0,10px,0) rotate3d(0,1,0,90deg);
    transform:translate3d(0,10px,0) rotate3d(0,1,0,90deg);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

.tooltip-effect-3 .tooltips-content i{
    -webkit-transform:scale3d(0,0,1);
    transform:scale3d(0,0,1);

}
/* 气泡3 end*/
/* 气泡4 */
.tooltip-effect-4 .tooltips-content{
    -webkit-transform: translate3d(0,-20px,0);
    -moz-transform: translate3d(0,-20px,0);
    -ms-transform: translate3d(0,-20px,0);
    -o-transform: translate3d(0,-20px,0);
    transform: translate3d(0,-20px,0);

}

.tooltip-effect-4 .tooltips-content i{
    -webkit-transform: translate3d(0,20px,0);
    transform: translate3d(0,20px,0);
}
/* 气泡4 end */
/* 气泡5 */
.tooltip-effect-5 .tooltips-content{
    -webkit-transform: scale3d(0,0,1);
    transform: scale3d(0,0,1);
}

.tooltip-effect-5 .tooltips-content i{
    -webkit-transform:translate3d(0,20px,0);
    transform:translate3d(0,20px,0);
}
/* 气泡5 end */

/* 鼠标滑过回原来的位置 */
.tooltip:hover .tooltips-content,
.tooltip:hover .tooltips-content i{
    opacity:1;
    -webkit-transform: translate3d(0,0,0) rotate3d(1,1,1,0) scale3d(1,1,1);
    -moz-transform: translate3d(0,0,0) rotate3d(1,1,1,0) scale3d(1,1,1);
    -o-transform: translate3d(0,0,0) rotate3d(1,1,1,0) scale3d(1,1,1);
    transform: translate3d(0,0,0) rotate3d(1,1,1,0) scale3d(1,1,1);
}